<template>
	<div class="doorder">
		<h1>订单表</h1>
		<ul>
			<li>
				<div v-for="item in list" class="ordersp">
					<img :src="`${$ip}/api/public/showimg/${item.book.pic}`" min-width="70" height="70" />
					<h5 class="name">书名:{{item.book.name}}</h5>
					<h5 class="price">价格:￥{{item.price}}</h5>
					<h5 class="num">数量:{{item.num}}</h5>
					<h5 class="zj">总价:{{item.num*item.price}}</h5>
				</div>
			</li>
			<li>
				<div class="shipupdate">
					<el-form label-width="80px">
						<el-form-item label="用户姓名:">
							<el-input v-model="user.name"></el-input>
						</el-form-item>
						<el-form-item label="用户手机:">
							<el-input v-model="user.phone"></el-input>
						</el-form-item>
						<el-form-item label="用户地址:">
							<el-input v-model="user.addr"></el-input>
						</el-form-item>
					</el-form>
					<div class="xd">
						<h5 class="dzj">总价:{{dzj}}</h5>
						<el-button @click="doorder()" v-show="!judge">去下单</el-button>
						<el-button v-show="judge" @click="fk()">去付款</el-button>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'mobliegoorder',
		data() {
			return {
				list: [],
				user: {},
				dzj: '',
				users: {},
				judge: false,
				order: {},
				book:[]
			}
		},
		methods: {
			doorder() {
				this.judge = true;
				this.book=this.list;
				this.users = {
					amount: this.dzj,
					ship2name: this.user.name,
					ship2phone: this.user.phone,
					ship2addr: this.user.addr,
					carts:this.book
				}
				console.log(this.users);
				this.$postjson('/api/fore/cart/add2Order', this.users).then((resp) => {
					console.log(resp.data.data.ordid);
					console.log("产生的订当总价:" + resp.data.data.amount);
					this.order = {
						od: resp.data.data.ordid,
						jg: this.dzj
					}
					this.$message({
						showClose: true,
						message: '下单成功,订单号为:' + resp.data.data.ordid
					});
				})
			},
			fk() {
				console.log(this.order);
				console.log(this.list);
				this.$router.push({
					query: {
						dx: this.order,
						sz: this.list
					},
					path: '/mobile/mobliedoorder'
				});
			}
		},
		mounted() {

			this.list = this.$route.query.user;

			let kk = 0;
			this.list.forEach((item) => {
				kk += item.price * item.num;
				console.log(item.id);
			})
			this.dzj = kk;
			console.log(this.$route.query.user);
			this.$get('/api/user/shipInfo').then((resp) => {
				console.log(resp.data.data);
				this.user = resp.data.data;
			})
		}
	}
</script>

<style>
	.doorder {
		width: 100%;
		font-family: KaiTi;
	}

	.doorder h1 {
		text-align: center;
	}

	.shipupdate {
		width: 100%;
		margin: 0 auto;
	}

	.shipupdate form {
		width: 100%;
		margin-left: 20%;
		margin-top: 5%;
	}

	.shipupdate input {
		width: 50%;
		border: none;
		background-color: #eaeaea;
	}

	.ordersp {
		width: 80%;
		margin: 0 auto;
		background-color: #eaeaea;
		border-radius: 1.25rem;
		margin-top: 1.25rem;
	}

	.ordersp img {
		margin-left: 4rem;
		margin-top: 3rem;
	}

	.ordersp h5.name {
		position: relative;
		left: 40%;
		top: -8rem;
	}

	.ordersp h5.price {
		position: relative;
		left: 40%;
		top: -8rem;
	}

	.ordersp h5.num {
		position: relative;
		left: 40%;
		top: -8rem;
	}

	.xd {
		width: 40%;
		display: flex;
		margin: 0 auto;
	}

	.xd h5.dzj {
		margin-left: 10%;
		line-height: 40px;
	}

	.xd button {
		margin-left: 5%;
	}

	.ordersp h5.zj {
		position: relative;
		left: 40%;
		top: -8rem;
	}
</style>